<template>
	<view class="con">
		<view class="button" @tap="scanCode">
			扫描设备二维码
		</view>
		
		<view class="node-type-one">
			<view class="title">节点ID</view>
			<input type="text" class="uni-input" name="" v-model="nodeID" placeholder="请输入节点ID" />
		</view>
		<view class="node-type-one">
			<view class="title">省份/城市</view>
			<pick-regions style="width: 80%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				border-radius: 10rpx;
				font-size: 26rpx;" :style='color1' :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">{{shengName}}{{shiName}}</pick-regions>
		</view>
		<view class="node-type-one">
			<view class="title">运营商</view>
			<picker style="width: 80%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				
				border-radius: 10rpx;
				font-size: 26rpx;" :style='color2'   mode="selector" :range="ispArr" @change="changeIsp">
				<view >{{isp}}</view>
			</picker>
		</view>
		<view class="node-type-one">
			<view class="title">上网方式</view>
			<picker style="width: 80%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				
				border-radius: 10rpx;
				font-size: 26rpx;" :style='color3'   mode="selector" :range="natArr" @change="changeNat">
				<view >{{nat}}</view>
			</picker>
		</view>
		<!-- <view class="node-type-one">
			<view class="title">IP类型</view>
			<radio-group  class="radio" @change="changeIp">
				<label class="radio"><radio value="2" color="#00a9e1" style="transform: scale(0.6)" checked="true" />多IP</label>
				<label class="radio"><radio value="1" color="#00a9e1" style="transform: scale(0.6)" />单IP</label>
			</radio-group>
		</view> -->
		
		<!-- <view class="node-type-three">
			<view class="title"></view>
			<view class="content">
				IP类型不同对应不同的拨号方式
			</view>
		</view> -->
		
		<!-- <view class="node-type-one">
			<view class="title">拨号方式</view>
			<picker style="width: 80%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				
				border-radius: 10rpx;
				font-size: 26rpx;" :style='color4'   mode="selector" :range="ipType == 1 ? ip: ips" @change="changeType">
				<view>{{type}}</view>
			</picker>
		</view> -->
		
		<view class="node-type-two">
			<view class="title">单条上行</view>
			<input type="text" class="uni-input" name="" v-model="upstream" placeholder="请输入单条上行" @input='countUpstream'/>
			<view class="unit">Mbps</view>
		</view>
		<view class="node-type-two">
			<view class="title">线路数量</view>
			<input type="text" class="uni-input" name="" v-model="nums" placeholder="请输入线路数量" @input='countNums'/>
			<view class="unit">总:{{G}}{{unit}}</view>
		</view>
		<view class="node-type-two">
			<view class="title" style="width: 120rpx;">DNS</view>
			<input type="text" style="width: 508rpx;border-radius: 10rpx;" class="uni-input" name="" v-model="dnsvalue" placeholder="填写DNS有助于提升您的跑量!"/>
		</view>
		<view class="node-type-one">
			<view class="title">公网/内网</view>
			<radio-group  class="radio" @change="changenats">
				<label class="radio"><radio value="public" color="#00a9e1" style="transform: scale(0.6)" />公网</label>
				<label class="radio"><radio value="inner" color="#00a9e1" style="transform: scale(0.6)" />内网</label>
			</radio-group>
		</view>
		<view class="node-type-one">
			<view class="title">机房类型</view>
			<radio-group  class="radio" @change="changejifang" style="">
				<label class="radio"><radio value="IDC机房" color="#00a9e1" style="transform: scale(0.6);font-size: 20rpx;" />IDC机房</label>
				<label class="radio"><radio value="城域网机房" color="#00a9e1" style="transform: scale(0.6);font-size: 20rpx;" />城域网机房</label>
				<label class="radio"><radio value="托管机房" color="#00a9e1" style="transform: scale(0.6);font-size: 20rpx;" />托管机房</label>
			</radio-group>
		</view>
		<view class="node-type-one">
			<view class="title">UPS</view>
			<radio-group  class="radio" @change="changeups">
				<label class="radio"><radio value="有UPS" color="#00a9e1" style="transform: scale(0.6)" />有UPS</label>
				<label class="radio"><radio value="无UPS" color="#00a9e1" style="transform: scale(0.6)" />无UPS</label>
			</radio-group>
		</view>
		<view class="node-type-one">
			<view class="title">IP协议栈</view>
			<radio-group  class="radio" @change="changeipinfo">
				<label class="radio"><radio value="双栈" color="#00a9e1" style="transform: scale(0.6)" />双栈</label>
				<label class="radio"><radio value="IPv4" color="#00a9e1" style="transform: scale(0.6)" />IPv4</label>
				<label class="radio"><radio value="IPv6" color="#00a9e1" style="transform: scale(0.6)" />IPv6</label>
			</radio-group>
		</view>
		
		
		<view class="submit" @tap="submit">
			立即绑定
		</view>
	</view>
</template>

<script>
	let App = getApp()
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	export default {
		components: {
			 pickRegions
		},
		
		data() {
			return {
				nodeID:'',
				shengName:'请选择',
				shiName:'',
				quName:'',
				defaultRegion:['广东省','深圳市'],
				defaultRegionCode:'4403',
				region:[],
				ispArr:['移动','联通','电信'],
				isp:'请选择运营商',
				//natArr:['公网','NAT1'],
				natArr:['服务器上网','路由器上网','固定公网多IP','固定公网单IP'],
				nat:'请选择上网方式',
				ipType:2,
				ip:['静态单IP'],
				ips:['静态多IP','服务器拨号','DHCP多IP','软路由'],
				type:'请选择拨号方式',
				color1:'color: #84848e',
				color2:'color: #84848e',
				color3:'color: #84848e',
				color4:'color: #84848e',
				upstream:'',
				nums:'',
				G:'0.00',
				unit:'Gbps',
				nats:'',
				jifanginfo:'',
				upsvalue:'',
				ipvalue:'',
				dnsvalue:''
			}
		},
		
		computed:{
			regionName(){
				// 转为字符串
				return this.region.map(item=>item.name).join(' ')
			}
		},
		
		methods: {
			
			//扫描二位吗
			scanCode(){
				var _this = this
				wx.scanCode({
					success: function (res) {
						_this.nodeID = res.result
					}
				})
			},
			
			//三级联动
			handleGetRegion(region){
				console.log(region)
				this.color1 = 'color: #000000'
				this.shengName = region[0].name
				this.shiName = region[1].name
				//this.quName = region[2].name
				console.log(this.shengName)
				console.log(this.shiName)
			},
			
			//选择运营商类型
			changeIsp(e){
				this.color2 = 'color: #000000'
				this.isp = this.ispArr[e.detail.value]
			},
			
			//选择拨号方式
			changeType(e){
				this.color4 = 'color: #000000'
				if(this.ipType == 1){
					this.type = this.ip[e.detail.value]
				}else{
					this.type = this.ips[e.detail.value]
				}
				
			},
			//选择Nat类型
			changeNat(e){
				this.color3 = 'color: #000000'
				this.nat = this.natArr[e.detail.value]
			},
			
			//选择ip类型
			changeIp(e){
				this.ipType = e.detail.value
			},
			
			//选择公网内网
			changenats(e){
				this.nats = e.detail.value
			},
			
			//选择机房类型
			changejifang(e){
				this.jifanginfo = e.detail.value
			},
			
			//选择ups类型
			changeups(e){
				this.upsvalue = e.detail.value
			},
			
			//选择IP协议栈类型
			changeipinfo(e){
				this.ipvalue = e.detail.value
			},
			
			//计算总数
			countUpstream(e){
				this.G = e.detail.value*this.nums
				if(this.G >= 1000){
					this.G = this.G/1000
					this.unit = 'Gbps'
				}else{
					this.unit = 'Mbps'
				}
			},
			//计算总数
			countNums(e){
				this.G = e.detail.value*this.upstream
				if(this.G >= 1000){
					this.G = this.G/1000
					this.unit = 'Gbps'
				}else{
					this.unit = 'Mbps'
				}
			},
			
			//提交
			submit(){
				if(this.jifanginfo == '' || this.nats =='' || this.ipvalue =='' || this.upsvalue ==''){
					uni.showToast({
						title:'参数不能为空',
						icon:'error'
					})
				}else{
					uni.showLoading({
						title:'请稍等'
					})
					let userinfo = uni.getStorageSync('userinfo');
					this.$api.interfaceApi('addbigServer')({
						admin_id:App.globalData.sys,
						deviceId:this.nodeID,
						province:this.shengName,
						city:this.shiName,
						isp:this.isp,
						upBandwidth:this.upstream,
						lineNumber:this.nums,
						diallingType:this.nat,
						//dialType:this.type,
						uid:userinfo.id,
						dns:this.dnsvalue,
						machineRoomType:this.jifanginfo,
						natType:this.nats,
						ipProtocol:this.ipvalue,
						upsvalue:this.upsvalue
					}).then(result=>{
						uni.hideLoading();
						
						if(result.code == 200){
							uni.navigateTo({
								url:'/pages/index/adds-result?nodeID='+this.nodeID
							})
						}else{
							uni.showToast({
								title:result.msg,
								icon:'none'
							})
						}
					})
					
				}
				
			},
			
			
		}
	}
</script>

<style  lang="scss">
	.con{
		padding: 10rpx 40rpx;
		
		.button{
			margin-top: 30rpx;
			width: 100%;
			height: 40rpx;
			background-color: #00a9e1;
			color: #FFFFFF;
			text-align: center;
			padding: 20rpx 0;
			font-size:30rpx;
		}
		
		.node-type-one{
			display: flex;
			padding: 30rpx 0 0 0;
			
			.title{
				width: 20%;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
			}
		
			.uni-input{
				width: 80%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
			}
			
			.radio{
				padding: 20rpx 0rpx;
				font-size: 26rpx;
			}
			
		}
		
		.node-type-two{
			display: flex;
			padding: 30rpx 0 0 0 ;
			
			.title{
				width: 20%;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
			}
					
			.uni-input{
				width: 50%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				border-radius: 10rpx 0 0 10rpx;
				font-size: 26rpx;
			}
			
			.unit{
				width: 30%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				border-radius:  0 10rpx 10rpx 0;
				font-size: 26rpx;
				text-align: end;
			}
			
		}
		
		.node-type-three{
			display: flex;

	
			.title{
				width: 20%;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
			}
					
			.content{
				width: 80%;
				color: #84848e;
				font-size: 22rpx;
			}
		}
		
		.submit{
			width: 100%;
			height: 40rpx;
			padding: 20rpx 0;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			color: #FFFFFF;
			text-align: center;
			font-size:30rpx;
			border-radius: 10rpx;
			background: linear-gradient(to right , #00a9e1 , #0055ff);
		}
		
		
	}
		
</style>
